import * as React from 'react';
import {observer} from 'mobx-react';
import {Row, Col, Button, Icon} from 'antd';
import {addStore, listStore, searchStore, areaTreeStore} from '../SudokuStore';
import {SelectItem} from '../../../../component/select/Select';
import {SearchForm} from '../../../../component/searchForm/SearchForm';
import {TreeSelectItem} from '../../../../component/treeSelect/TreeSelect';

import './SearchBarStyle.less';

@observer
export class SudokuListSearchBar extends React.Component<any, any> {
    toggle(me) {
        return function () {
            searchStore.OnExpand(searchStore.expand);
        }
    }

    onClear(me) {
        return function () {
            searchStore.clearSearch(listStore);
        }
    }

    onSearch(me) {
        return function () {
            listStore.load(searchStore.getValuesWithName());
        }
    }

    componentDidMount() {
        searchStore.load();
    }

    componentWillUnmount() {
        searchStore.clearSearchState();
    }

    add = () => {
        addStore.load();
    }

    refresh = () => {
        listStore.refresh(searchStore)
    }

    render() {
        return (
            <div>
                <Row gutter={2} className="group-bar">
                    <Col span={21} style={{paddingLeft: 10}}>
                        <Button type="primary" icon="plus-circle-o" onClick={this.add}>新增入口</Button>
                        <Button type="primary" icon="reload" onClick={this.refresh} loading={listStore._RefreshLoading}>刷新</Button>
                    </Col>
                    <Col span={3} style={{display: 'flex', justifyContent: 'flex-end'}}>
                        <Button style={{marginLeft: 8, marginRight: 0}} onClick={this.toggle(this)}>搜索<Icon
                            type={searchStore.expand ? 'up' : 'down'}/></Button>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <SearchForm onClear={this.onClear(this)} onSearch={this.onSearch(this)} store={searchStore}>
                            <SearchFormItem/>
                        </SearchForm>
                    </Col>
                </Row>
            </div>
        )
    }
}

@observer
class SearchFormItem extends React.Component<any, any> {
    onChangePlatForm = (value) => {
        searchStore.changeField('platformType', {
            value: value
        });
    }

    onChangeCategory = (value) => {
        searchStore.changeField('category', {
            value: value
        });
    }

    onChangeTreeSelect = (value, extra) => {

        const {triggerNode} = extra;

        if (!!triggerNode && triggerNode.props && triggerNode.props.isLeaf) {
            searchStore.changeField('areaIds', {
                value: value
            });
        }
    }

    render() {
        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 18},
        };

        return (
            <div>
                <Row>
                    <Col span={6}>
                        <SelectItem mykey="platformType"
                                    title="平台"
                                    optionKey='type'
                                    optionValue='title'
                                    store={searchStore}
                                    onChange={this.onChangePlatForm}
                                    labelCol={formItemLayout.labelCol}
                                    wrapperCol={formItemLayout.wrapperCol}/>
                    </Col>
                    <Col span={6}>
                        <SelectItem mykey="category"
                                    title="类型"
                                    optionKey='type'
                                    optionValue='name'
                                    store={searchStore}
                                    onChange={this.onChangeCategory}
                                    labelCol={formItemLayout.labelCol}
                                    wrapperCol={formItemLayout.wrapperCol}/>
                    </Col>
                    <Col span={12}>
                        <TreeSelectItem
                            {...formItemLayout}
                            label="区域:"
                            filedName="areaIds"
                            store={searchStore}
                            treeData={areaTreeStore.treeData}
                            onChange={this.onChangeTreeSelect}
                            multiple={false}
                            treeCheckable={false}/>
                    </Col>
                </Row>
            </div>
        )
    }
}
